<template>
  <div class="tag-market-search">
    <div class="tag-content market-search-box">
      <div class="logo"><img src="./img/logo.png" />标签超市</div>
      <search-box ref="searchBox" @onSearch="onSearch" @changeClassifyType="changeClassifyType"></search-box>
    </div>
    <div class="tag-content clearfix">
      <div class="filter-box">
        <div class="market-cate">
          <div class="title"><icon-svg name="iconMenu"></icon-svg>标签体系导航<i class="el-icon-caret-top"></i></div>
          <div class="cate-content">
            <market-cate @cateClick="cateClick"></market-cate>
          </div>
        </div>
        <div class="filter-tabs tag-scrollbar">
          <h4>结果过滤</h4>
          <el-collapse v-model="openArray">
            <el-collapse-item v-for="(value, key) in filter" :key="key" :name="key" :title="value.name">
              <div class="clearfix">
                <div
                  class="filter-item"
                  v-for="category in value.children"
                  :key="category.id"
                  :class="{ active: selectFilter.findIndex(val => val.id === category.id) >= 0 }"
                  @click="addFilter(category.id)"
                >
                  {{ category.name }}<span>{{ category.count }}</span>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="results clearfix">
        <div class="result-nav">
          <ul class="clearfix">
            <li :class="{ active: activeNav === '' }" @click="changeNav('')">全部结果</li>
            <li :class="{ active: activeNav === '1' }" @click="changeNav('1')">基础标签</li>
            <!-- <li :class="{ active: activeNav === '2' }" @click="changeNav('2')">客群</li> -->
            <li :class="{ active: activeNav === '3' }" @click="changeNav('3')">标签专辑</li>
          </ul>
          <div class="result-filter">
            <el-button :type="sort === 0 ? 'primary' : ''" size="mini" class="filter" plain @click="changeSort(0)">
              <icon-svg name="iconFilter"></icon-svg>匹配度
            </el-button>
            <el-button :type="sort === 1 ? 'primary' : ''" size="mini" class="filter" plain @click="changeSort(1)">
              <icon-svg name="iconFireOff"></icon-svg>热度
            </el-button>
          </div>
        </div>
        <div class="search-result">
          <p class="total">{{ total }}条结果</p>
          <el-row :gutter="20">
            <el-col :span="6" class="result-item" v-for="item in results" :key="item.asset_id || item.assetId">
              <div class="list-wrap" @click="handleClick(item)">
                <div class="icon">
                  <icon-svg
                    :name="Number(item.assetType || item.asset_type) | iconNameFormatter"
                    class="item-icon"
                  ></icon-svg>
                </div>
                <div v-html="item.assetNm || item.asset_nm" class="name"></div>
                <div class="field" v-html="item.assetFieldNm || item.asset_field_nm"></div>
                <div class="biz">
                  <span v-html="item.assetDesc || item.asset_desc" class="biz-content"></span>
                </div>
                <p class="ellipsis">
                  <span class="ellipsis-content">
                    <span :class="{ relate: item.asset_basic_catalog || item.assetBasicCatalog }">
                      {{ item.asset_basic_catalog || item.assetBasicCatalog }}
                    </span>
                  </span>
                </p>
                <div class="result-handler clearfix">
                  <div class="hot">
                    <span v-if="item.assetHotVal !== undefined && item.assetHotVal !== null">
                      <icon-svg name="iconFire" v-for="(hot, index) in item.assetHotVal" :key="index"></icon-svg>
                      <icon-svg
                        name="iconFireOff"
                        v-for="(hot, index) in 5 - item.assetHotVal"
                        :key="10 - index"
                      ></icon-svg>
                    </span>
                    <span v-if="item.asset_hot_val !== undefined && item.asset_hot_val !== null">
                      <icon-svg name="iconFire" v-for="(hot, index) in item.asset_hot_val" :key="index"></icon-svg>
                      <icon-svg
                        name="iconFireOff"
                        v-for="(hot, index) in 5 - item.asset_hot_val"
                        :key="10 - index"
                      ></icon-svg>
                    </span>
                  </div>
                  <div class="counts">
                    <span><i class="el-icon-star-on"></i>{{ item.assetWatchCnt || item.asset_watch_cnt || 0 }} </span>
                    <span>
                      <icon-svg name="iconEye"></icon-svg>{{ item.assetExploreCnt || item.asset_explore_cnt || 0 }}
                    </span>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            background
            layout="total, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import './utils/marketFormatter'
import market from './utils/market'
import searchBox from './components/search-box'
import marketCate from './components/market-cate'
export default {
  components: {
    searchBox,
    marketCate
  },
  data() {
    return {
      searchWay: 'query', //用于区分是输入框搜索还是导航点击搜索
      activeNav: '',
      filter: {},
      selectFilter: [],
      openArray: [],
      keyword: '',
      classifyType: '',
      sort: 0,
      results: [],
      currentPage: 1,
      pageSize: 16,
      total: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  watch: {
    $route() {
      this.init()
    }
  },
  methods: {
    init() {
      if (this.$route.query.catalogId) {
        this.searchWay = 'cate'
        this.catalogId = this.$route.query.catalogId
        this.searchByCate()
      } else {
        this.searchWay = 'query'
        this.keyword = this.$route.query.keyword || ''
        this.$refs.searchBox.keyword = this.$route.query.keyword || ''
        this.$refs.searchBox.classifyType = this.$route.query.classifyType || ''
        this.classifyType = this.$route.query.classifyType || ''
        this.activeNav = this.$route.query.classifyType || ''
        this.getList(0)
      }
    },
    getList(from, pagechange) {
      let params = {
        assetType: this.classifyType,
        from: from,
        queryStr: this.keyword,
        schSrc: 1,
        size: this.pageSize,
        sort: this.sort,
        assetStatus: 1
      }
      if (this.selectFilter.length) {
        let catalog = ''
        this.selectFilter.forEach(val => {
          catalog += '<' + val.id + '>,'
        })
        catalog = catalog.substring(0, catalog.length - 1)
        params.assetCatalog = catalog
      }
      this.$ajax({
        url: this.$ajax.setUrl('index/supermarket/query'),
        method: 'get',
        params: this.$ajax.setParams(params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          let content = data.data.contents
          if (data.data.users) content = content.concat(data.data.users)
          this.results = content
          this.total = data.data.total
          if (!pagechange) this.computeFilter(data.data.catalogs)
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    onSearch(params) {
      let query = {}
      if (params.keyword) query.keyword = params.keyword
      if (params.classifyType) query.classifyType = params.classifyType
      this.$router.replace({
        name: 'market-search',
        query: query
      })
    },
    changeClassifyType(val) {
      this.classifyType = val
      this.activeNav = val
      this.currentPage = 1
      this.filter = {}
      this.selectFilter = []
      if (this.searchWay === 'query') this.getList(0)
      else this.searchByCate()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      if (this.searchWay === 'query') this.getList((val - 1) * this.pageSize, true)
      else this.searchByCate()
    },
    changeSort(val) {
      if (this.searchWay === 'query') {
        this.sort = val
        this.currentPage = 1
        this.getList(0)
      }
    },
    computeFilter(catalogs) {
      let filter = {}
      catalogs.forEach(v => {
        if (v.asset_catalog) {
          let catalog = v.asset_catalog.split(';')
          catalog.forEach(k => {
            if (!k) return
            let category = k.split(',')
            let categoryTopId = Number(category[0].match('\\[(.+?)\\]')[1])
            if (!this.openArray.find(key => key === categoryTopId.toString()))
              this.openArray.push(categoryTopId.toString())
            if (filter[categoryTopId]) {
              let categoryId = Number(category[1].match('\\<(.+?)\\>')[1])
              let childrenIndex = -1
              for (let i = 0; i < filter[categoryTopId].children.length; i++) {
                if (filter[categoryTopId].children[i].id === categoryId) childrenIndex = i
              }
              if (childrenIndex >= 0) {
                filter[categoryTopId].children[childrenIndex].count++
              } else {
                filter[categoryTopId].children.push({
                  id: categoryId,
                  name: category[1].split(':')[1],
                  count: 1
                })
              }
            } else
              filter[categoryTopId] = {
                name: category[0].split(':')[1],
                children: [
                  {
                    id: Number(category[1].match('\\<(.+?)\\>')[1]),
                    name: category[1].split(':')[1],
                    count: 1
                  }
                ]
              }
          })
        }
      })
      this.filter = filter
    },
    addFilter(id) {
      if (this.selectFilter.find(val => val.id === id)) {
        let index = this.selectFilter.findIndex(val => val.id === id)
        this.selectFilter.splice(index, 1)
      } else {
        this.selectFilter.push({
          id
        })
      }
      this.getList(0)
    },
    cateClick(id) {
      this.currentPage = 1
      this.catalogId = id
      this.searchByCate()
    },
    searchByCate() {
      this.searchWay = 'cate'
      this.keyword = ''
      this.$refs.searchBox.keyword = ''
      this.filter = {}
      this.selectFilter = []
      this.$ajax({
        url: this.$ajax.setUrl('index/supermarket/result'),
        method: 'get',
        params: this.$ajax.setParams({
          currentPageNum: this.currentPage,
          pageSize: this.pageSize,
          queryParams: {
            catalogId: this.catalogId,
            assetType: this.classifyType
          }
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.results = data.data.searchNavDTOS.records
          this.total = data.data.searchNavDTOS.totalSize
          let filter = {}
          data.data.dclCatalogNavResultDTOS.forEach(v => {
            if (!this.openArray.find(key => key === v.catalogClassId)) this.openArray.push(v.catalogClassId.toString())
            if (filter[v.catalogClassId]) {
              if (!filter[v.catalogClassId].children.find(catelog => catelog.id === v.catalogId)) {
                filter[v.catalogClassId].children.push({
                  id: v.catalogId,
                  name: v.catalogNm,
                  count: v.num
                })
              }
            } else {
              filter[v.catalogClassId] = {
                name: v.catalogClassNm,
                children: [
                  {
                    id: v.catalogId,
                    name: v.catalogNm,
                    count: v.num
                  }
                ]
              }
            }
          })
          this.filter = filter
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    changeNav(navName) {
      this.activeNav = navName
      this.classifyType = navName
      this.$refs['searchBox'].classifyType = navName
      this.currentPage = 1
      this.filter = {}
      this.selectFilter = []
      if (this.searchWay === 'query') this.getList(0)
      else this.searchByCate()
    },
    handleClick(item) {
      if (Number(item.asset_type) === 3 || Number(item.assetType) === 3) {
        this.$ajax({
          url: this.$ajax.setUrl(`ast/astAlbum/openPermission/${item.asset_id || item.assetId}`),
          method: 'get',
          params: this.$ajax.setParams()
        }).then(({ data }) => {
          if (data && data.code === '0') {
            if (data.data) {
              let routeName = market.typeToRoute(Number(item.asset_type || item.assetType))
              this.$blank(routeName, { params: { id: item.asset_id || item.assetId } })
            } else this.$message.error(`没有查看该专辑的权限`)
          } else {
            this.$message.error(data.data || data.msg)
          }
        })
      } else {
        if (!this.$auth('sch:astTag:view')) {
          this.$message.error(`没有查看标签的权限`)
          return
        }
        let routeName = market.typeToRoute(Number(item.asset_type || item.assetType))
        this.$blank(routeName, { params: { id: item.asset_id || item.assetId } })
      }
    }
  }
}
</script>

<style lang="scss">
.tag-market-search {
  margin-top: -20px;
  padding: 10px 0;
  background-color: #fff;
  min-height: calc(100vh - 80px);
  .tag-content {
    padding-left: 230px;
    padding-right: 230px;
  }
  .market-search-box {
    height: 120px;
    margin-bottom: 5px;
    position: relative;
    .logo {
      font-size: 20px;
      font-weight: bold;
      color: $theme-color;
      margin: 30px 0 0 50px;
      position: absolute;
      img {
        height: 60px;
        margin-right: 20px;
      }
    }
    .market-search-box {
      padding: 40px 0 0 350px;
    }
  }
  .filter-box {
    float: left;
    width: 250px;
    .market-cate {
      position: relative;
      z-index: 2;
      &:hover {
        .cate-content {
          display: block;
        }
        .title i {
          transform: rotate(180deg);
        }
      }
      .market-cate-menu {
        border-color: #f3f6fb;
        ul {
          color: #5f6064;
          background-color: #f3f6fb;
          li {
            &.show {
              .menu {
                background-color: transparent;
              }
            }
            .market-cate-part {
              background-color: #f3f6fb;
              &:after {
                background-color: #f3f6fb;
              }
              .market-cate-part-con dl dd span:hover {
                color: #fff;
              }
              .market-cate-part-con {
                dl {
                  color: rgba($color: #000000, $alpha: 0.7);
                }
                dd {
                  color: rgba($color: #000000, $alpha: 0.6);
                  border-color: #5f6064;
                }
              }
            }
            &:last-of-type span {
              color: #5f6064;
            }
          }
        }
      }
      .title {
        width: 100%;
        font-size: 16px;
        padding: 0 20px;
        line-height: 40px;
        color: #fff;
        background-color: $theme-color;
        svg {
          width: 18px;
          height: 18px;
          margin: -5px 10px 0 0;
          vertical-align: middle;
        }
        i {
          float: right;
          margin: 13px 10px 0 0;
          color: $border-color;
          transition: all linear 0.2s;
        }
      }
      .cate-content {
        position: absolute;
        left: 0;
        right: 0;
        display: none;
        z-index: 1;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
        .market-cate-part {
          top: -40px;
        }
      }
    }
    .filter-tabs {
      background-color: #f3f7fb;
      max-height: 880px;
      overflow-y: auto;
      h4 {
        padding: 10px 20px;
      }
      .el-collapse {
        border-top: none;
      }
      .el-collapse-item__header {
        font-size: 15px;
        font-weight: 600;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        color: $theme-color;
        background-color: #f3f7fb;
      }
      .el-collapse-item__header.is-active {
        border-bottom-color: #e4e8ec;
        background-color: #f3f7fb;
      }
      .el-collapse-item__wrap {
        border-bottom: none;
        background-color: #f3f7fb;
      }
      .el-collapse-item__content {
        padding: 10px;
      }
      .filter-item {
        margin: 10px;
        padding-right: 50px;
        cursor: pointer;
        position: relative;
        span {
          margin-left: 5px;
          padding: 0 10px;
          color: #fff;
          background-color: #79c8c0;
          position: absolute;
          right: 0;
          border-radius: 2px;
        }
        &.active span {
          background-color: $theme-color;
        }
      }
    }
  }
  .results {
    width: 100%;
    padding-left: 250px;
    .result-nav {
      float: left;
      width: 100%;
      margin: 0;
      padding: 0 0 0 30px;
      text-align: center;
      border-bottom: 1px solid $border-color;
      position: relative;
      ul {
        padding-right: 200px;
        li {
          float: left;
          width: 65px;
          height: 40px;
          line-height: 40px;
          margin: 0 15px;
          list-style-type: none;
          cursor: pointer;
          &.active {
            color: $theme-color;
            position: relative;
            &:after {
              width: 100%;
              height: 1px;
              content: '';
              background-color: $theme-color;
              position: absolute;
              bottom: -1px;
              left: 0;
            }
          }
        }
      }
      .result-filter {
        width: 200px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        .el-button {
          width: 80px;
          .icon-svg {
            margin-right: 5px;
          }
          &:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
          }
          &:nth-child(2) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
          }
          & + .el-button {
            margin-left: 0;
          }
        }
      }
    }
    .search-result {
      float: left;
      width: 100%;
      padding: 10px 0 10px 40px;
      .total {
        line-height: 30px;
      }
      .result-item {
        margin-bottom: 20px;
      }
      .list-wrap {
        padding: 10px 20px;
        border: 1px solid $theme-color;
        position: relative;
        transition: all 0.2s linear;
        cursor: pointer;
        overflow: hidden;
        &:hover {
          transform: scale(1.1);
          box-shadow: 8px 0 8px rgba(0, 0, 0, 0.3), 0 8px 8px rgba(0, 0, 0, 0.3);
          .name,
          .biz {
            color: $theme-color;
          }
        }
        .name {
          font-size: 18px;
          font-weight: bold;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .field {
          height: 20px;
          line-height: 20px;
          margin: 5px 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .biz {
          height: 40px;
          line-height: 20px;
          word-break: break-all;
          overflow: hidden;
          text-overflow: ellipsis;
          .biz-content {
            font-size: 12px;
            float: right;
            margin-left: -5px;
            width: 100%;
            word-break: break-all;
          }
          &::before {
            float: left;
            width: 5px;
            content: '';
            height: 40px;
          }
          &::after {
            float: right;
            content: '...';
            height: 20px;
            line-height: 12px;
            width: 2em;
            margin-left: -2em;
            text-align: right;
            position: relative;
            left: 100%;
            top: -20px;
            padding-right: 5px;
            background-color: #fff;
            box-sizing: content-box;
            background: linear-gradient(to right, transparent, #fff 40%);
          }
        }
        .ellipsis {
          height: 40px;
          line-height: 20px;
          margin-top: 15px;
          .ellipsis-content {
            font-size: 12px;
            float: right;
            margin-left: -5px;
            width: 100%;
            word-break: break-all;
          }
          &::before {
            float: left;
            width: 5px;
            content: '';
            height: 40px;
          }
          &::after {
            float: right;
            content: '...';
            height: 20px;
            line-height: 12px;
            width: 2em;
            margin-left: -2em;
            text-align: right;
            position: relative;
            left: 100%;
            top: -20px;
            padding-right: 5px;
            background-color: #fff;
            box-sizing: content-box;
            background: linear-gradient(to right, transparent, #fff 40%);
          }
        }
        .relate {
          padding: 5px 10px;
          background-color: #d8ddfb;
        }
        .icon {
          width: 40px;
          height: 35px;
          position: absolute;
          top: 0;
          right: 0;
          svg {
            width: 16px;
            height: 16px;
            color: #fff;
            position: absolute;
            top: 2px;
            right: 4px;
            z-index: 1;
          }
          &:after {
            display: block;
            width: 200%;
            height: 200%;
            content: '';
            background-color: #7883c1;
            position: absolute;
            left: 30%;
            bottom: 0;
            transform: rotate(45deg);
          }
        }
        .result-handler {
          margin-top: 10px;
          .hot {
            float: left;
            svg {
              width: 15px;
              height: 15px;
              margin-right: 5px;
              color: #aaa;
            }
          }
          .counts {
            float: right;
            span {
              vertical-align: middle;
              padding: 0 5px;
              i {
                font-size: 18px;
                color: #feb767;
                margin: -5px 5px 0 0;
                vertical-align: middle;
              }
              svg {
                width: 18px;
                height: 18px;
                margin: -3px 5px 0 0;
                vertical-align: middle;
              }
              & + span {
                padding-right: 0;
                border-left: 1px solid $border-color;
              }
              &:last-child svg {
                color: #89a7dd;
              }
            }
          }
        }
      }
      .el-pagination {
        margin-top: 10px;
        text-align: right;
      }
    }
  }
}
</style>
